<template>
  <el-dialog
    :model-value="dialogFormVisible"
    title="编辑"
    align-center
    draggable
    width="33%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <el-form-item>*跨页批量选择无效</el-form-item>
    <el-form :model="form" label-width="120px" :rules="rules">
      <el-form-item label="已选择员工">
        {{ empNameList }}
      </el-form-item>
      <el-form-item label="批量修改内容">
        <el-select
          v-model="form.option"
          placeholder="请选择"
          style="width: 250px"
        >
          <el-option
            v-for="(item, index) in optionList"
            :label="item.name"
            :key="index"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="基础工资" v-show="form.option == 1">
        <el-input v-model="form.baseWage" style="width: 250px" />
      </el-form-item>
      <el-form-item label="地区系数" v-show="form.option == 2">
        <el-select
          v-model="form.regionCoefficientId"
          placeholder="请选择"
          style="width: 250px"
        >
          <el-option
            v-for="(item, index) in regionList"
            :label="item.region"
            :key="index"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位系数" v-show="form.option == 3">
        <el-input v-model="form.positionCoefficient" style="width: 250px" />
      </el-form-item>
      <el-form-item label="绩效工资" v-show="form.option == 4">
        <el-input v-model="form.performanceWage" style="width: 250px" />
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100px" type="primary" @click="onSubmit"
          >确定</el-button
        >
        <el-button style="width: 100px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {
  ref,
  onBeforeMount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { getRegionCoefficient, changeAll } from "@/api/coefficient";
import { ElMessage } from "element-plus";

const props = defineProps({
  dialog: {
    type: Boolean,
    required: true,
  },
  selection: {
    type: Object,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
  update: {
    type: Function,
    default: () => {},
  },
});

const dialogFormVisible = ref(false);
const regionList = ref([]);
const PositonCoefficientList = ref([]);
const optionList = ref([
  {
    name: "基础工资",
    id: 1,
  },
  {
    name: "绩效工资",
    id: 4,
  },
]);
const form = ref({
  option: null,
  empList: [],
  baseWage: null,
  performanceWage: null,
});
const empNameList = ref();
onBeforeMount(() => {
  getRegionCoefficient().then((data) => {
    regionList.value = [];
    for (let i of data.data) {
      i.id = String(i.id);
      regionList.value.push(i);
    }
  });
});

watch(props, (newValue, oldValue) => {
  form.value.option = null;
  form.value.baseWage = null;
  form.value.performanceWage = null;
  form.value.empList = newValue.selection;
  let string = "";
  for (let x of newValue.selection) {
    string += x.empName + " ";
  }
  empNameList.value = string;
});

const onClose = () => {
  props.close();
};

const onSubmit = () => {
  
  changeAll(form.value).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "批量修改成功",
        type: "success",
      });
      props.update();
      props.close();
    }
  });
};
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>